<script setup>
import { defineProps } from 'vue';
import {useRouter} from 'vue-router';

import useNightModeStore from "@/stores/nightModeStore";

const likeme=(commentid,event)=>{
    console.log("点击事件对象",event);
    console.log("点击的元素对象",event.target);
    if(event.target.tagName!="I") return;
    let isLike=true;
    if(event.target.className=="like"){
        event.target.className="nolike"
        isLike=true;
    }else{
        isLike=false;
        event.target.className="like"
    }

    props.list.map(item=>{
        if(commentid==item.id){
            if(isLike)item.likes--;
            else item.likes++;
        }
    })
}


const nightModeStore=useNightModeStore();
const props=defineProps({
    storyid:{
        type:Number,
        default:0
    },
    extra:{
        type:Object,
        default:()=>{
            return{
                comments:0,
                popularity:0
            }
        }
    }
});
//创建router对象
const router=useRouter();
const goback=()=> router.back();
const seeComment=()=>{
    router.push(`/comments/${props.storyid}`);
}
</script>
<template>
    <div :class="['bar',nightModeStore.isNight?'night':'']">
        <i class="back" @click="goback"></i>
        <i class="comment" @click="seeComment"><span>{{props.extra.comments}}</span></i>
        <i class="up">
            <span>{{props.extra.popularity}}</span></i>
        <i class="collect"></i>
        <i class="forward"></i>
    </div>
    <div class="box"></div>

</template>
<style scoped>
.bar.night{
    background-color: #555;
    color: white;
}
.box{
    height:50px;
}
.bar{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: #eee;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}
/*  */
.bar i{
    width: 50px;
    height: 50px;
    background: url(../assets/fanhui.png) center center no-repeat;
    background-size: 20px 20px;
    font-style: normal;
    position: relative;

}
.bar i.back{
    background-image: url(../assets/fanhui.png);
}
.bar i.comment{
    background-image: url(../assets/pinglun.png);
}
.bar i.up{
    background-image: url(../assets/dianzan.png);
    background-size: 25px 25px;
}
.bar i.collect{
    background-image: url(../assets/shoucang.png);
    background-size: 30px 30px;
}
.bar i.forward{
    background-image: url(../assets/zhuanfa.png);
}
.bar i>span{
    position: absolute;
    top: 10px;
    left: 37px;
    font-size: 12px;
}
</style>